<%@ page language="java" import="java.util.*" contentType="text/html;charset=UTF-8" pageEncoding="utf-8"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("path",path);
%>

<!doctype html>
<html lang="ch">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<title>BeidaJadeBird</title>
		
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/statics/css/bootstrap.min.css" >
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/statics/css/common.css" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/statics/css/slide.css" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/statics/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/statics/css/flat-ui.min.css" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/statics/css/jquery.nouislider.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/statics/css/record.css"> 
		<link media="screen" type="text/css"   href="${pageContext.request.contextPath }/statics/css/style.css"> 
		<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 
		<script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/jquery.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/websocket.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/jquery.nouislider.js"></script>
		
	<style type="text/css">
	.col-xs-5{
	width: 200px;
	}
	.col-xs-5 #sKnot2{
	position: relative;
	}
	
	p{
  color:#525252;
  font-size:12px;
}

.skillbar {
	position:relative;
	display:block;
	margin-bottom:15px;
	width:100%;
	background:#eee;
	height:20px;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-webkit-transition:0.4s linear;
	-moz-transition:0.4s linear;
	-ms-transition:0.4s linear;
	-o-transition:0.4s linear;
	transition:0.4s linear;
	-webkit-transition-property:width, background-color;
	-moz-transition-property:width, background-color;
	-ms-transition-property:width, background-color;
	-o-transition-property:width, background-color;
	transition-property:width, background-color;
}

.skillbar-title {
	position:absolute;
	top:0;
	left:0;
    width:210px;
	font-weight:bold;
	font-size:13px;
	color:#ffffff;
	background:#6adcfa;
	-webkit-border-top-left-radius:3px;
	-webkit-border-bottom-left-radius:4px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-bottomleft:3px;
	border-top-left-radius:3px;
	border-bottom-left-radius:3px;
}

.skillbar-title span {
	display:block;
	background:rgba(0, 0, 0, 0.1);
	padding:0 20px;
	height:20px;
	line-height:20px;
	-webkit-border-top-left-radius:3px;
	-webkit-border-bottom-left-radius:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-bottomleft:3px;
	border-top-left-radius:3px;
	border-bottom-left-radius:3px;
}

.skillbar-bar {
	height:20px;
	width:0px;
	background:#6adcfa;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}

.skill-bar-percent {
	position:absolute;
	right:10px;
	top:0;
	font-size:11px;
	height:20px;
	line-height:20px;
	color:#ffffff;
	color:rgba(0, 0, 0, 0.4);
}
	</style>

		

	</head>

	<body >
		<div id="wrap">
			<!-- 左侧菜单栏目块 -->
			<div class="leftMeun" id="leftMeun">
				
				
				<div id="logoDiv">
					<p id="logoP"><img id="logo" alt="报名登记" src="${pageContext.request.contextPath }/statics/images/Logo.gif"><span>青鸟报名系统</span></p>
				</div>
				<div style="color:#FFFFFF">
				${user.campusname }
				</div>
				<div id="personInfor">
					<table>
						<tr>
							<td>
								<img class="headimg" src="${user.headimg}">
							</td>
							<td style="padding: 5px;">
								<span id="userName">${user.name}</span><br>
								<span>${user.phone}</span>
							</td>
						</tr>
					</table>
					
					
					
					
					
					
					<p>
						<a href="quit">退出登录</a>&nbsp;&nbsp;&nbsp;&nbsp;
						<span class="meun-item" href="#chan" aria-controls="chan" role="tab" data-toggle="tab"   style="border: hidden;">个人中心</span>
					</p>
				</div>
				
				<div class="meun-title">人事管理</div>
				<div class="meun-item" href="#user" aria-controls="user" role="tab" data-toggle="tab"><img src="${pageContext.request.contextPath }/statics/images/icon_user_grey.png">用户管理</div>
				<div class="meun-item" href="#sour" aria-controls="sour" role="tab" data-toggle="tab"><img src="${pageContext.request.contextPath }/statics/images/icon_source.png">职员管理</div>
				
				<div class="meun-title">校区管理</div>
				<div class="meun-item" href="#char" aria-controls="char" role="tab" data-toggle="tab"><img src="${pageContext.request.contextPath }/statics/images/icon_chara_grey.png">课程管理</div>
				<div id="grade-title" class="meun-item" href="#a"    aria-controls="a"    role="tab" data-toggle="tab"><img src="${pageContext.request.contextPath }/statics/images/icon_change_grey.png">班级管理</div>
			 <div id="grade-titles" class="meun-item" href="#departmentcaozuo" aria-controls="char" role="tab" data-toggle="tab"><img src="${pageContext.request.contextPath }/statics/images/icon_card_grey.png">部门管理</div>
				
				<div class="meun-title">档案管理</div>
				<div class="meun-item" href="#scho" aria-controls="scho" role="tab" data-toggle="tab"><img src="${pageContext.request.contextPath }/statics/images/icon_house_grey.png">档案申请</div>
				<div id="record-title" class="meun-item" href="#sitt" aria-controls="sitt" role="tab" data-toggle="tab"><img src="${pageContext.request.contextPath }/statics/images/icon_char_grey.png">档案审核</div>
				<div class="meun-item" href="#stud" aria-controls="stud" role="tab" data-toggle="tab"><img src="${pageContext.request.contextPath }/statics/images/icon_card_grey.png">历史记录</div>
				<div class="meun-item" href="#regu" aria-controls="regu" role="tab" data-toggle="tab"><img src="${pageContext.request.contextPath }/statics/images/icon_rule_grey.png">统计管理</div>
			</div>
			
			<!-- 右侧具体内容栏目 -->
			<div id="rightContent">
				<a class="toggle-btn" id="nimei">
					<i class="glyphicon glyphicon-align-justify"></i>
				</a>
				
				<!-- Tab panes -->
				<div class="tab-content">
				
				
					<%@include file="personnel.jsp"%>
				
					<%@include file="campus.jsp"%>
					
					<%@include file="record.jsp"%>
					
					<c:if test="${user.roleid==6 }">
					
					<%@include file="statistical.jsp" %>
					</c:if>
					
					<c:if test="${user.roleid!=6||user.roleid==5 }">
					
						<div id="regu" role="tabpanel" class="tab-pane">
						<img src='${pageContext.request.contextPath }/statics/images/lock.png' style='width:10%;margin-left: 45%;margin-top: 15%;' />
						
						</div>
					
					
					</c:if>
					
				</div>
			</div>
			
			</div>


		
		<script>
			$(function() {
			   
			    if('${teachers}'==""){
			    	$("#sour").html("<img src='${pageContext.request.contextPath }/statics/images/lock.png'"
			    	+"style='width:10%;margin-left: 45%;margin-top: 15%;' />");
			    };
			    
			    if('${userList}'==""){
			    	$("#user").html("<img src='${pageContext.request.contextPath }/statics/images/lock.png'"
			    	+"style='width:10%;margin-left: 45%;margin-top: 15%;' />");
			    }
			    
			    if('${departmentList}'==""){
			    	$("#char").html("<img src='${pageContext.request.contextPath }/statics/images/lock.png'"
			    	+"style='width:10%;margin-left: 45%;margin-top: 15%;' />");
			    }
			    
			    
			   // alert('${user.roleid}');
			    /* 档案申请页面是否显示 */
			    if('${user.roleid}'!='2'&&'${user.roleid}'!='4'){
			    	$("#scho").html("<img src='${pageContext.request.contextPath }/statics/images/lock.png'"
			    	+"style='width:10%;margin-left: 45%;margin-top: 15%;' />");
			    }
			    
			    
			    
			    if("${empty page}"=="false"){
			    	$(".meun-item").removeClass("meun-item-active");
			    	$(".meun-item[href=${page}]").addClass("meun-item-active");
			    	$(".tab-pane").removeClass("active");
			    	$("${page}").addClass("active");
			    }
			    
			    
			    if('${DDDD}'==""){
			    	$("#departmentcaozuo").html("<img src='${pageContext.request.contextPath }/statics/images/lock.png'"
			    	+"style='width:10%;margin-left: 45%;margin-top: 15%;' />");
			    
			    }
			    
			     if('${user.roleid}'==2){
			    	$("#sitt").html("<img src='${pageContext.request.contextPath }/statics/images/lock.png'"
			    	+"style='width:10%;margin-left: 45%;margin-top: 15%;' />");
			    }
				
				
				
				
				/* 切换页面 */
				$(".meun-item").click(function() {
			
				 /* 	$(".tab-pane").hide();		
					$(".meun-item").removeClass("meun-item-active"); */
					/* $(this).addClass("meun-item-active");
					var itmeObj = $(".meun-item").find("img"); */
					/* 
					itmeObj.each(function() {
						var items = $(this).attr("src");
						items = items.replace("_grey.png", ".png");
						items = items.replace(".png", "_grey.png");
						$(this).attr("src", items);
					}); */
					
					/* var attrObj = $(this).find("img").attr("src");;
					attrObj = attrObj.replace("_grey.png", ".png");
					$(this).find("img").attr("src", attrObj);
					*/
				   
					
					$.ajax({
					url:"${pageContext.request.contextPath }/location",
					type:"POST",
					dateType:"JSON",
					data:{
						'Page':$(this).attr("href"),
					},
					success:function(data){
					$(".tab-pane").hide();		
					$(".meun-item").removeClass("meun-item-active");
					 window.location.href="${pageContext.request.contextPath }/index";
					},
					error:function(){
					
					}
				
				
				
				
				});
					
					
					
					
					
				});
				
				
				$("#topAD").click(function() {
					$("#topA").toggleClass(" glyphicon-triangle-right");
					$("#topA").toggleClass(" glyphicon-triangle-bottom");
				});
				$("#topBD").click(function() {
					$("#topB").toggleClass(" glyphicon-triangle-right");
					$("#topB").toggleClass(" glyphicon-triangle-bottom");
				});
				$("#topCD").click(function() {
					$("#topC").toggleClass(" glyphicon-triangle-right");
					$("#topC").toggleClass(" glyphicon-triangle-bottom");
				});
				$(".toggle-btn").click(function() {
					$("#leftMeun").toggleClass("show");
					$("#rightContent").toggleClass("pd0px");
				});
			});
			
			
			
			
		</script>

		<script>
			 //min/max slider
			function huadong(my, unit, def,max) {
				$(my).noUiSlider({
					range: [0, max],
					start: [def],
					handles: 1,
					connect: 'upper',
					slide: function() {
						var val =Math.floor($(this).val());
						$(this).find(".noUi-handle").text(
							val + unit
						);
						console.log($(this).find(".noUi-handle").parent().parent().html());
					},
					set: function() {
						var val =Math.floor($(this).val());
						$(this).find(".noUi-handle").text(
							val + unit
						);
					}
				});
				$(my).val(def, true);
			}
			huadong('.slider-minmax1', "分钟", "5",30);
			huadong('.slider-minmax2', "分钟", "6",15);
			huadong('.slider-minmax3', "分钟", "10",60);
			huadong('.slider-minmax4', "次", "2",10);
			huadong('.slider-minmax5', "天", "3",7);
			huadong('.slider-minmax6', "天", "8",10);
		</script>

	</body>

</html>
